<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品页</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

</head>
<style>
	#m{width:360px;height:360px}
</style>
<body>
	<script type="text/javascript">
	function getQueryVariable(variable){
	       var query = window.location.search.substring(1);
	       var vars = query.split("&");
	       for (var i=0;i<vars.length;i++) {
	               var pair = vars[i].split("=");
	               if(pair[0] == variable){return pair[1];}
	       }
	       return(false);
		}
		$(function(){
			
			var id=getQueryVariable("id");
			$.post("gProduct",{
				id:id
			},function(res){
				$("#productS").append(`
						<div >
						<div>
							<div>
								<div>
									<img id="m" src="images/${res.img}">
								</div>
							</div>
						</div>
						
					</div>
					`)
				$("#shangPingXiangQing").append(`
						<ul class="ul-box">
		                <li>
		                    <table width="490" border="0" cellpadding="0" cellspacing="0">
		                    <tr>
		                        <td width="65" height="40"><div align="center">编号:</div></td>
		                        <td width="347" >${res.number}</td>
		                        <td width="65" height="40"><div align="center">镜面:</div></td>
		                         <td width="347" class="price">${res.watchCase}</td>
		                    </tr>
		                    <tr>
		                         
		                    </tr>
		                    <tr>
		                        <td height="40" width="65"><div align="center">风格:</div></td>
		                        <td class="time">${res.style}</td>
		                        <td height="40" width="65"><div align="center">材质</div></td>
		                        <td class="time">${res.watchBand}</td>
		                    </tr>
		                    <tr>
		                       
		                    </tr>
		                    <tr>
	                        <td height="40" width="65"><div align="center">重量:</div></td>
	                        <td class="time">${res.weight}</td>
	                        <td height="40" width="65"><div align="center">表盘:</div></td>
	                        <td class="time">${res.dial}</td>
	                    </tr>
	                    <tr>
                        
                    	</tr>
		                </table>
		                </li>
		               
					</ul>	
				`)	
				$("#productB").append(`
						<h1 style="font-size: 16px;">${res.name}</h1>
			            <ul class="ul-box">
			                <li>
			                    <table width="490" border="0" cellpadding="0" cellspacing="0">
			                    <tr>
			                        <td width="65" height="40"><div align="center">售价：</div></td>
			                        <td width="347" class="price" style="text-decoration:line-through;color: #666666;">￥${res.sellPrice}</td>
			                    </tr>
			                        <tr>
			                            <td width="65" height="40"><div align="center">折后价：</div></td>
			                            <td width="347" id="count" class="price">￥${res.discountPrice}</td>
			                        </tr>
			                    <tr>
			                        <td height="40" width="65"><div align="center">产地:</div></td>
			                        <td class="time">${res.address}</td>
			                    </tr>
			                    <tr>
			                        <td height="40" width="65"><div align="center">材质</div></td>
			                        <td class="time">${res.watchBand}</td>
			                    </tr>
			                    <tr>
		                        <td height="40" width="65"><div align="center">重量:</div></td>
		                        <td class="time">${res.weight}</td>
		                    </tr>
		                    <tr>
	                        <td height="40" width="65"><div align="center">适用人群:</div></td>
	                        <td class="time">${res.intendedFor}</td>
	                    	</tr>
			                </table>
			                </li>
			                
			                <li>
			                    <table width="490" border="0" cellpadding="0" cellspacing="0">
			                       
			                        
			                        <tr>
			                            <td height="40" width="65"><div align="center">数量：</div></td>
			                            <td class="time">
			                                <button id="jian">-</button>&nbsp;<input type="text" value="1" id="num" class="kucun">&nbsp;<button id="jia">+</button>&nbsp;库存：999件</td>
			                        </tr>
			                    </table>
			                </li>
			                <li>
			                    <table width="490" border="0" cellpadding="0" cellspacing="0">
			                        <tr>
			                            <td width="65" height="35"><div align="right">发货地：</div></td>
			                            <td width="404">${res.address}</td>
			                        </tr>
			                        <tr>
			                            <td width="75" height="35"><div align="right">支付方式：</div></td>
			                            <td width="404">货到付款&nbsp;|&nbsp;微信支付&nbsp;|&nbsp;支付宝&nbsp;|&nbsp;银联</td>
			                        </tr>
			                    </table>

			                </li>
			                <li>
			                    <button type="submit" class="buy">立刻购买</button>
			                    <button type="button" onclick="addShopping()" class="buy">加入购物车</button>
			                </li>
						</ul>

				`)
				 var num_jia = document.getElementById("jia");
			     var num_jian = document.getElementById("jian");
			     var input_num = document.getElementById("num");
			
			    num_jia.onclick = function() {
			
			        input_num.value = parseInt(input_num.value) + 1;
			    }
			
			    num_jian.onclick = function() {
			
			        if(input_num.value <= 0) {
			            input_num.value = 0;
			        } else {
			
			            input_num.value = parseInt(input_num.value) - 1;
			        }
			
			    }
			},"json")
		})
		
		function addShopping(){
			var u = JSON.parse(localStorage.getItem("user"));
			if(u==null){
				alert("请先登录")
			window.location.href="http://localhost:8080/watch/login.html"
			}
			var id=getQueryVariable("id");
			var u=JSON.parse(localStorage.getItem("user"));
			$.post("getShoppingCartByWhere",{
				productId:id,
				userId:u.id
			},function(res){
				if(res!=1){
					var count = $("#count").html()
					console.log(count)
					var nums=parseInt(res.number)
					var num2=parseInt($("#num").val());
					var num =nums+num2;
					var price=num*count;
					$.post("updateShopcartByWhere",{
						id:res.id,
						productId:id,
						userId:u.id,
						number:num,
						count:price
					},function(res){
						alert("添加购物车成功")
					},"json")
				}else if(res==1){
					var num = $("#num").val();
					var count = $("#count").html()
					console.log(count)
					var price = num*count
					$.post("addShoppingCartByWhere",{
						productId:id,
						userId:u.id,
						number:num,
						count:price
					},function(res){
						alert("添加购物车成功")
					},"json")
					
				}
			},"json")
		}
		
		
		$(function(){
			var id=getQueryVariable("id");
			$.post("getCommon",{
				productId:id
			},function(res){
				console.log(res);
				for (var i = 0; i < res.length; i++) {
					$("#pingJia").append(`
							<tr bgcolor="#fafafa">
							<td width="86" height="80"><div align="center" 
									style="font-size: 14px;">${res[i].username.username}</div></td>
							<td width="404" style="font-size: 14px;">${res[i].content}</td>
							<td width="404"><div align="center"
									style="font-size: 14px; color: #666666;">${res[i].commonDate}
									</div></td>
						</tr>
							`)
					}
				},"json");
		});
		 //库存加减
	</script>
	
	<!--header-->
	<div class="header2">
		<div class="header-box">
			<div class="header">
				<div class="header-left-title">
					<div class="welcome">
						<img class="icon" src="images/icon/welcome.png" alt="">&nbsp;欢迎来到<a
							href="">AnJunDCM官网</a>!
					</div>
					<div class="login">
						&nbsp;&nbsp;&nbsp;<a href="login.html">登陆</a>&nbsp;丨&nbsp;<a
							href="reg.html">免费注册</a>
					</div>
				</div>
				<div class="header-center-title">
					<ul>
						<li><a href="home/user.html">我的AnJun</a></li>
						<li><a href="cart.html">购物车</a><span class="count">1</span></li>
						<li><a href="">我的订单</a></li>
						<li><a href="">收藏网站</a></li>
						<li><a href="">积分</a></li>
					</ul>
				</div>
				<div class="header_right_title">
					<ul>
						<li><a href="">我要供货</a></li>
						<li><a href="">客服中心<i class="kefu-icon"><img
									src="images/kefu.png" alt="" width="20" height="20"></i></a></li>

					</ul>

				</div>


			</div>
			<div class="header-nav-box">
				<div class="nav">
					<div class="nav-logo">
						<a href="" class="logo"><img src="images/logo.png" alt=""></a>
					</div>
					<div class="nav-search-box">
						<form action="" name="fomr1">
							<div class="nav-search">
								<div class="bar1">
									<input type="text" placeholder="请输入您要搜索的内容..." class="text">
									<button type="submit" class="btn">搜索</button>
								</div>
								<div class="search-key">
									<span class="key-title">热搜词汇:</span>
									<div class="key">
										<ul>
											<li><a href="">手机</a></li>
											<li><a href="">电子产品</a></li>
											<li><a href="">衣服</a></li>
											<li><a href="">鞋子</a></li>
											<li><a href="">鞋子</a></li>
											<li><a href="">鞋子</a></li>
											<li><a href="">鞋子</a></li>
											<li><a href="">鞋子</a></li>
											<li><a href="">鞋子</a></li>
										</ul>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="wechat-box">
						<ul>
							<li><img src="images/app.jpg" alt="" width="110"
								height="110"></li>
							<li><img src="images/app.jpg" alt="" width="110"
								height="110"></li>
						</ul>
					</div>

				</div>
				<div class="nav-daohang">
					<div class="daohang">
						<ul>
							<li><a href="goods.html">全部分类</a></li>
							<li><a href="index.html">首页</a></li>
							<li><a href=""> 选品采购</a></li>
							<li><a href="daigou.html">指定代购</a></li>
							<li><a href="need.html"> 需求提交</a></li>
							<li><a href="">个性定制</a></li>
							<li><a href="wl-case.html">物流方案</a></li>
							<li><a href="join.html">我要入驻</a></li>
							<li><a href="us.html">关于我们</a></li>

						</ul>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!--hearder end!-->

	<div class="products-box-main">
		<div class="products-show-box">
			<div class="products-show-box-title">
				<ul>
					<li><a href="">首页</a></li>
					<li>-</li>
					<li><a href="">分类</a></li>
					<li>-</li>
					<li><a class="active-title">2019女装新款 夏季时尚开衫 推荐款</a></li>

				</ul>

			</div>
			<div class="products-show-box-mid">
				<div id="productS" class="products-img">
					

				</div>

				<div id="productB" class="products-box-mid-content"></div>

				<div class="products-shop-box">
					<ul class="shop-title">
						深圳市XXX贸易有限公司
						<li>公司代码：9144XXX9144XXX9144XXX</li>
						<li>保证金：1000￥</li>
						<li>联系人：张三</li>
						<li>邮件：123456@qq.com</li>
						<li>所在地：山东</li>
						<li>地址：山东省菏泽市XXXX山东省菏泽市XXXX山东省菏泽市XXXX</li>
						<li>店铺等级：<img src="images/xingxing.png" alt="" width="20"
							height="20" style="vertical-align: middle;"></li>
						<li><button>
								<a href="">进入店铺</a>
							</button>
							<button>
								<a href="">收藏店铺</a>
							</button></li>
					</ul>

				</div>

			</div>


			<div class="goods-detail-box">
				<div class="detail-left">
					<div class="detail-title">
						<ul>
							<li id="two1" onmouseover="setContentTab(&#39;two&#39;,1,3)"
								class="active">商品详情</li>
							<li id="two2" onmouseover="setContentTab(&#39;two&#39;,2,3)" class="active">商品评价</li>
						</ul>

					</div>

					<div class="detail" id="con_two_1">
						<table  id="shangPingXiangQing" width="978" border="0" cellpadding="0" cellspacing="0"
							class="pinglun">
							
						</table>
					
					</div>
					<div class="detail2" id="con_two_2">
						<table  id="pingJia" width="978" border="0" cellpadding="0" cellspacing="0"
							class="pinglun">
							
						</table>
						<div class="detail-page">
							
						</div>


					</div>


				</div>
				

			</div>

		</div>



	</div>

	<!--footer-->
	<div class="footer-box">
		<div class="footer-list-box">
			<div class="footer-list">
				<ul>
					<img src="images/icon/about.png" alt="" width="20" height="20">&nbsp;关于我们
					<li class="magin"><a href="">关于安骏</a></li>
					<li><a href="">产品服务</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">企业文化</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/zhinan.png" alt="" width="20" height="20">&nbsp;新手指南
					<li class="magin"><a href="">新手福利</a></li>
					<li><a href="">推荐有奖</a></li>
					<li><a href="">会员中心</a></li>
					<li><a href="">我的积分</a></li>
					<li><a href="">客服中心</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/zhifu.png" alt="" width="20" height="20">&nbsp;支付方式
					<li class="magin"><a href="">支付宝</a></li>
					<li><a href="">WeChat</a></li>
					<li><a href="">前海支付</a></li>
					<li><a href="">银联支付</a></li>
					<li><a href="">其它支付</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/icon/daohang.png" alt="" width="20" height="20">&nbsp;网站导航
					<li class="magin"><a href="">选品采购</a></li>
					<li><a href="">指定代购</a></li>
					<li><a href="">需求提交</a></li>
					<li><a href="">我要入驻</a></li>
					<li><a href="">系统登录</a></li>
				</ul>
			</div>

			<div class="footer-list">
				<ul>
					<img src="images/kefu.png" alt="" width="20" height="20">&nbsp;客服电话：
					<li class="magin" id="phone"><a href="">0755-12345678</a></li>
					<li><a href="">地址：深圳市龙岗区坂田街道格泰隆工业园</a></li>
					<li><a href="">邮箱：123456789@qq.com</a></li>

				</ul>
			</div>

			<div class="footer-list" style="margin-left: 100px;">
				<ul>
					<img src="images/app.jpg" alt="" width="150" height="150">
					<li class="magin" id="guanzhu"><a href="">关注安骏</a></li>

				</ul>
			</div>


		</div>
		<div class="footer-footer">© 2020-2020 AnJun DCM All Rights
			Reserved 9.0 备案号：123456789</div>

	</div>
	<!--footer end!-->

	<!--焦点图脚本-->
	<script>
    $(function () {
        var sdBoxW = $('.moveBox').css('width');
        sdBoxW = parseInt(sdBoxW);//移动层的宽度
        var magBoxW = $('.magBox').css('width');
        magBoxW = parseInt(magBoxW);//图片放大层的宽度
        var normalBoxW = $('.normalBox').css('width');
        normalBoxW = parseInt(normalBoxW);//事件绑定层的宽度
        var num = 0;//存放下标
        //找出放大图片的比例(核心)
        var scale = magBoxW/sdBoxW;
        //移入normalBox盒子
        $('.normalBox').hover(function () {
            $('.moveBox').css('display','block');
            $('.magBox').css('display','block');
        },function () {
            $('.moveBox').css('display','none');
            $('.magBox').css('display','none');
        });
        //3、移入leftBox层
        $('.leftBox').mouseover(function () {
            //给放大的图片和图片层设置宽度；
            $('.magBox ul li img').css('width',scale*normalBoxW+'px');
            $('.magBox ul li').css({'width':scale*normalBoxW+'px','height':scale*normalBoxW+'px'})
        });
        //4、设置放大倍数
        var n = 1;
        function sty() {
            $('.moveBox').css({'width':200/n+'px','height':200/n+'px'});
            $('.multiple').html(n);
            scale = magBoxW/(sdBoxW/n);
        }
        $('.btn1').click(function () {
            n ++;
            sty()
        });
        $('.btn2').click(function () {
            if (n==1){
                return;
            } else {
                n --;
                sty()
            }
        }) ;
        //1、移入缩小图关联
        $('.botBox ul li').attr('index',function (i,e) {
            return i;
        });
        $('.botBox ul li').mouseover(function () {
            if ($(this).attr('class')=='bord'){
                return;//跳过第一个
            }else{
                $(this).attr('class','bord').siblings().removeAttr('class');
                var index = $(this).attr('index');
                //联动normal和magBox中的图片
                $('.normalBox .w').eq(index).attr('id','n').siblings().removeAttr('id');
                $('.magBox ul li').eq(index).attr('class','m').siblings().removeAttr('class');
                num = index;
            }
        });
        //2、鼠标在移动层移动
        $('.normalBox').mousemove(function (e) {
            var offset = $(this).offset();
            var X = e.pageX-offset.left-$('.moveBox').width()/2;
            var Y = e.pageY-offset.top-$('.moveBox').height()/2;
            if (X<=0){
                X=0;
            }else if(X>$(this).width()-$('.moveBox').width()){
                X = $(this).width()-$('.moveBox').width();
            }
            if (Y<=0){
                Y=0;
            }else if(Y>$(this).height()-$('.moveBox').height()){
                Y = $(this).height()-$('.moveBox').height();
            }
            $('.moveBox').css('left',X+'px');
            $('.moveBox').css('top',Y+'px');
            $('.magBox ul li').eq(num).css('left',-X*scale+'px');
            $('.magBox ul li').eq(num).css('top',-Y*scale+'px');
        });
    })

  
</script>
	<!--焦点图end-->

	<!--选项卡js-->
	<script type="text/javascript">
   	function setContentTab(name, curr, n) {
        for (i = 1; i <= n; i++) {
            var menu = document.getElementById(name + i);
            var cont = document.getElementById("con_" + name + "_" + i);
            menu.className = i == curr ? "active" : "";
            if (i == curr) {
                cont.style.display = "block";
            } else {
                cont.style.display = "none";
            }
        }
    }
</script>
</body>
</html>